<template lang="pug">
  .usefate
    div 邀请总人数：{{total}}人
    .group-box.unionname
      .title 大赢家累计金额：
      .content 
        input(v-model="consumeForm.first")
    .group-box.unionname
      .title 二赢家累计金额：
      .content 
        input(v-model="consumeForm.second")
    .group-box.unionname
      .title 三赢家累计金额：
      .content 
        input(v-model="consumeForm.third")
    
    .sure
      x-button(:gradients="['#FF9900', '#FF9900']" @click.native="confirm") 确定
    //- div() 
    //-   alert(v-model="showError" title="房卡不足" ) 
    //- div()
    //-   confirm( v-model="showCreate"  :title="'确认创建'+unionname"    @on-cancel="onCancel" @on-confirm="onConfirm")
</template>

<script>
import router from '@/router'
import memberService from '@/api/member'

export default {
  name: 'usefate',
  data () {
    return {
      // msg: 'Welcome to Your Union',
      unionname: '我的工会',
      beans: 20,
      showCreate: false,
      showError: false,
      total:5,
      consumeForm: {
        first: 10,
        second: 5,
        third: 1
      }
    }
  },
  methods: {
    confirm () {
      const that = this
      memberService.SetConsume(this.consumeForm)
        .then(res => {
          that.$vux.alert.show({
            title: '消耗设置成功',
            onHide () {
              router.replace('/index?type=2')
            }
          })
        })
    }
  },
  created(){
    document.title = '分销系统'
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .group-box{
    width:100%;
    padding:10px 20px;
    overflow: hidden;
    >div{
      float: left;
    }
  }
  .usefate{
    padding:10px 30px;
    .group-box{
      border-radius: 10px;
      background-color:#eee;
      margin-bottom:10px; 
      font-size: 20px;
      input{
        width: 100px;
        outline: none;
        border: none;
        height: 30px;
        font-size: 20px;
        background-color: #eee;
      }
    }
  }
  
  .sure{
    padding:15px 30px;
  }
</style>
